<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>高校学生成绩数据可视化系统</title>
	<link rel="stylesheet" href="css/index.css" />
	<link rel="stylesheet" href="css/center3.css" />
</head>

<body>
	<header>
		<div class="sel">
			<select class="sell">
				<option>
					<a href="javascript:;">数据科学与大数据技术</a>
				</option>
				<option>
					<a href="javascript:;">计算机应用技术</a>
				</option>
				<option>
					<a href="javascript:;">软件工程</a>
				</option>
				<option>
					<a href="javascript:;">软件技术</a>
				</option>
				<option>
					<a href="javascript:;">网络工程</a>
				</option>
				<option>
					<a href="javascript:;">网络技术</a>
				</option>
				<option>
					<a href="javascript:;">物联网工程</a>
				</option>
				<option>
					<a href="javascript:;">信息管理与信息系统</a>
				</option>
			</select>
		</div>
		<div class="title">
			<h1>高校学生成绩数据可视化系统</h1>
		</div>
		<div class="time">
			<div class="showTime"></div>
		</div>

	</header>
	<section class="main">
		<!-- column1 -->
		<div class="column">
			<div class="panel bar">
				<h2>班级平均分</h2>
				<div class="chart" id="bar1"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line" >
				<h2>各科平均分</h2>
				<div class="chart" id="line1"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel pie">
				<h2>成绩分布</h2>
				<div class="chart" id="pie1"></div>
				<div class="panel-footer"></div>
			</div>
		</div>
		<!-- column2 -->
		<div class="column">
			<!-- 数字模块 -->
			<div class="no"></div>
			<!-- 地图模块 -->
			<div class="map">
				<div class="map1">
					<!-- 旋转 -->
					<div class="container">
						<div class="shape" style="--n: 10;">
							<div class="shape" style="--n: 9;">
								<div class="shape" style="--n: 8;">
									<div class="shape" style="--n: 7;">
										<div class="shape" style="--n: 6;">
											<div class="shape" style="--n: 5;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /旋转 -->
				</div>
				<div class="map2"></div>
				<div class="map3"></div>
				<div class="chart" id="treeMap"></div>
			</div>
		</div>
		<!-- column3 -->
		<div class="column">
			<div class="panel bar2">
				<h2>绩点排名</h2>
				<div class="chart" id="bar2"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line2">
				<h2>学业预警</h2>
				<div class="chart" id="line2"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel pie2">
				<h2>班级绩点</h2>
				<div class="chart" id="pie2"></div>
				<div class="panel-footer"></div>
			</div>
		</div>
	</section>

	<script type="text/javascript" src="js/flexible.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/bar1.js"></script>
	<script type="text/javascript" src="js/bar2.js"></script>
	<script type="text/javascript" src="js/line1.js"></script>
	<script type="text/javascript" src="js/line2.js"></script>
	<script type="text/javascript" src="js/scatter.js"></script>
	<script type="text/javascript" src="js/linear.js"></script>
	<script type="text/javascript" src="js/gauge.js"></script>
	<script type="text/javascript" src="js/treemap.js"></script>

	<script type="text/javascript">
		var t = null;
		t = setTimeout(time, 1000); 
		function time() {
			clearTimeout(t); 
			dt = new Date();
			var y = dt.getFullYear();
			var mt = dt.getMonth() + 1;
			var day = dt.getDate();
			var h = dt.getHours(); 
			var m = dt.getMinutes(); 
			var s = dt.getSeconds();
			document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" +
				s + "秒";
			t = setTimeout(time, 1000);    
		}
	</script>
</body>

</html>